<!-- 搜索 -->
<template>
  <view class="search-input-container">
    <view class="search-input-container__bg" v-if="showList"></view>
    <view class="search-input-container__input" :class="{ focus: showList }">
      <view>
        <wd-icon name="search" size="32rpx" color="#FD7B1B"></wd-icon>
        <input
          v-model="inputValue"
          placeholder="搜索专业/岗位/企业吧~"
          @focus="handleFoces"
          @blur="handleBlur"
          @input="handleInput"
          @confirm="handleConfirm"
        />
      </view>
    </view>
    <view class="search-input-container__list" v-if="showList">
      <view
        class="search-input-container__list--item"
        v-for="(item, index) in searchList"
        :key="index"
        @click="handleSelect(item.name)"
      >
        <wd-icon name="search" size="32rpx" color="rgba(62,70,84,0.55)"></wd-icon>
        <text>{{ item.name }}</text>
        <c-tag v-if="item.re === '1'" text="职位" />
        <c-tag v-if="item.re == '2'" text="企业" type="blue" />
        <c-tag v-if="item.re === '3'" text="专业" type="green" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ApiJobSearch } from '@/service/job';
  const props = defineProps({
    modelValue: {
      type: String,
      default: '',
    },
  });
  const showList = ref(false);
  const emit = defineEmits(['focus', 'blur', 'update:modelValue', 'confirm']);
  const inputValue = ref(props.modelValue);
  const searchList = ref<Array<{ re: string; name: string }>>([]);

  const handleFoces = () => {
    showList.value = true;
    emit('focus');
  };
  const handleBlur = () => {
    showList.value = false;
    emit('blur');
  };
  const handleInput = () => {
    emit('update:modelValue', inputValue.value);
    if (!inputValue.value) {
      searchList.value = [];
      return;
    }
    ApiJobSearch({
      name: inputValue.value,
    }).then(({ data }) => {
      searchList.value = data as Array<{ re: string; name: string }>;
    });
  };
  const handleSelect = (name: string) => {
    inputValue.value = name;
    emit('update:modelValue', name);
    handleConfirm();
  };
  const handleConfirm = () => {
    emit('confirm');
  };

  watch(
    () => props.modelValue,
    (nv) => {
      inputValue.value = nv;
    },
  );
</script>

<style lang="scss" scoped>
  .search-input-container {
    &__bg {
      background: #fff;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }

    &__input {
      padding: 32rpx 32rpx 0;
      & > view {
        display: flex;
        align-items: center;
        border: 2rpx solid $uni-color-primary;
        background: #fcf7ed #ffffff;
        border-radius: 16rpx;
        padding: 24rpx 32rpx;
        gap: 26rpx;
        input {
          color: $uni-color-title;
          flex: 1 0 0;
          font-size: 32rpx;
        }
      }
      &.focus {
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(62, 70, 84, 0.09);
        padding-bottom: 32rpx;
      }
    }
    &__list {
      padding: 0 32rpx;
      position: absolute;
      top: calc(
        var(--safe-area-inset-top) + var(--safe-area-inset-bottom) + var(--wd-navbar-height) +
          156rpx
      );
      left: 0;
      width: 100%;
      z-index: 99;
      &--item {
        display: flex;
        align-items: center;
        gap: 16rpx;
        padding: 24rpx 0;
        box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(62, 70, 84, 0.09);
        color: $uni-color-title;
        font-size: 32rpx;
      }
    }
  }
</style>
